@LineHeight: 3em;

.tip-window-mask
{
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    background-color: rgba(0, 0, 0, .5);
    transition: visibility .5s, opacity .5s;

    .tip-window
    {
        position: fixed;
        left: 10000px;
        top: 10000px;
        transform: translate(-50%, -50%);
        width: 30em;
        background-color: white;
        transition: left .5s, top .5s;

        .tip-window-caption
        {
            width: 100%;
            height: @LineHeight;
            line-height: @LineHeight;
            background-color: #eee;
            text-indent: 1em;

            div
            {
                width: @LineHeight;
                height: @LineHeight;
                float: right;
                text-align: center;
                transition: background-color .5s, color .5s;
                text-indent: 0;

                &:hover
                {
                    cursor: pointer;
                    color: white;
                    background-color: red;
                }
            }
        }

        .tip-window-contant
        {
            padding: 2em;
            text-indent: 2em;
            word-wrap: break-word;
            // word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本规则，允许在字内换行
            word-break: normal; 
        }

        .tip-window-oparations
        {
            text-align: center;
            padding-bottom: 1em;

            button
            {
                font-size: 1.2em;
                font-family: Microsoft Yahei;
                padding: 0.3em 1em;
                margin: 0 1em;
            }
        }
    }
}

.tip-window-enabled
{
    visibility: visible;
    opacity: 1;

    .tip-window
    {
        left: 50%;
        top: 50%;
    }
}